<template>
   <div class="__vev_calendar-wrapper" :style="{width: initWidth,marginLeft: initMarginLeft}">
      <cal-panel
      :events="events"
      :calendar="calendarOptions"
      :selectedDay='selectedDayEvents.date'
      @cur-day-changed="handleChangeCurDay"
      @month-changed="handleMonthChanged">
    </cal-panel>
  </div>
</template>
<script>
import { isEqualDateStr } from './tools.js'
import calPanel from './components/cal-panel.vue'
const inBrowser = typeof window !== 'undefined'
export default {
  name: 'vue-event-calendar',
  components: {
    'cal-panel': calPanel
  },
  data () {
    return {
      selectedDayEvents: {
        date: 'all',
        events: this.events || []
      }
    }
  },
  props: {
    events: {
      type: Array,
      required: true,
      default: [],
      validator (events) {
        let validate = true
        events.forEach((event, index) => {
          if (!event.date) {
            console.error('Vue-Event-Calendar-Error:' + 'Prop events Wrong at index ' + index)
            validate = false
          }
        })
        return validate
      }
    },
    defaultDay: {
      type: String,
      required: false,
      default: 'all'
    }
  },
  computed: {
    initWidth () {
      return window.VueCalendarBarEventBus.$data.CALENDAR_EVENTS_DATA.options.clientWidth * 690 / 750 + 'px'
    },
    initMarginLeft () {
      return window.VueCalendarBarEventBus.$data.CALENDAR_EVENTS_DATA.options.clientWidth * 30 / 750 + 'px'
    },
    calendarOptions () {
      let dateObj = new Date()
      if (inBrowser) {
        return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA
      } else {
        return {
          options: {
            locale: 'en',
            color: '#00B685'
          },
          params: {
            curYear: dateObj.getFullYear(),
            curMonth: dateObj.getMonth(),
            curDate: dateObj.getDate(),
            curEventsDate: 'all'
          }
        }
      }
    },
    calendarParams () {
      let dateObj = new Date()
      if (inBrowser) {
        return window.VueCalendarBarEventBus.CALENDAR_EVENTS_DATA.params
      } else {
        return {
          curYear: dateObj.getFullYear(),
          curMonth: dateObj.getMonth(),
          curDate: dateObj.getDate(),
          curEventsDate: 'all'
        }
      }
    }
  },
  created () {
    if (this.calendarParams.curEventsDate !== 'all') {
      this.handleChangeCurDay(this.calendarParams.curEventsDate)
    }
  },
  methods: {
    handleChangeCurDay (date) {
      let events = this.events.filter(function (event) {
        return true
      })
      this.selectedDayEvents = {
        date: date,
        events: events
      }
      this.$emit('day-changed', {
        date: date,
        events: events
      })
    },
    handleMonthChanged (yearMonth) {
      this.$emit('month-changed', yearMonth)
    }
  },
  watch: {
    calendarParams () {
      if (this.calendarParams.curEventsDate !== 'all') {
        let events = this.events.filter(event => {
          return isEqualDateStr(event.date, this.calendarParams.curEventsDate)
        })
        this.selectedDayEvents = {
          date: this.calendarParams.curEventsDate,
          events
        }
      } else {
        this.selectedDayEvents = {
          date: 'all',
          events: this.events
        }
      }
    },
    events () {
      this.selectedDayEvents = {
        date: 'all',
        events: this.events || []
      }
    }
  }
}
</script>
<style lang="less">
@large-padding: 15px;
@media screen and (max-width: 750px) {
  .__vev_calendar-wrapper{
    .cal-wrapper{
      width: 100%;
      font-weight: bold;
    }
  }
}
.__vev_calendar-wrapper{
  position: relative;
  overflow: hidden;
  *{
    box-sizing: border-box;
  }
  .selected-day {
    background-color: #00b685;
    color: #ffffff;
  }
  
  .cal-wrapper{
    .cal-header{
      position: relative;
      width: 100%;
      background-color: #ffffff;
      overflow: hidden;
      &>div{
        float: left;
        padding: @large-padding;
      }
      .title{
        width: 70%;
        text-align: center;
        color: #5b6175;
      }
      .l{
        text-align: left;
        width: 15%;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
      .r{
        text-align: right;
        width: 15%;
        cursor: pointer;
        user-select: none;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
      }
    }
    .cal-body{
      width: 100%;
      .weeks{
        width: 100%;
        overflow: hidden;
        text-align: center;
        font-size: 1rem;
        .item{
          float: left;
          width: 12.8%;
        }
      }
      .dates{
        width: 100%;
        overflow: hidden;
        text-align: center;
        font-size: 1rem;
        .item{
          position: relative;
          float: left;
          display: block;
          width: 12.8%;
          cursor: default;
          -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
          .date-num{
            font-size: 1rem;
            position: relative;
            z-index: 3;
          }
          .is-event{
            content: '';
            background-color: #00B685;
            border-radius: 50%;
            position: absolute;
            z-index: 2;
          }
          .selected-event {
            background-color: #ffffff;
          }
        }
        .is-today{
          border: 2px solid #00B685;
        }
      }
    }
  }  
}

</style>
